<template>
  <div class="container js_container">
      <!-- main view -->
      <router-view
        class="view"
        transition="slide">
      </router-view>
  </div>
</template>

<style lang="less">
html{
    font-size:16px;
}
html, body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

body, .page {
    background-color: #f2f2f2;
}

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes slideIn {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOut {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

.page.slideIn {
    animation: slideIn .2s forwards;
}

.page.slideOut {
    animation: slideOut .2s forwards;
}

body {
  overflow-x: hidden;
}

.slide-transition {
  transition: left 0.3s ease;
  width: 100%;
}

.slide-enter, .slide-leave {
  left: 100%;
}

.slide-leave {
  left: 100%;
}

.weui_grid{
    .weui_grid_icon{
        position: relative;
    }
    i{
        width: 17rem/16;
        height:17rem/16;
        display: inline-block;
        background-size:17rem/16 17rem/16;
        background-image: url(../images/select_icon.png);
        position: absolute;
        right: -5rem/16;
        bottom: 0;
    }
}
.weui_dialog{
    box-shadow: 1px 1px 5px #000;
}
</style>
